<template>
    <div>
        <el-menu :default-active="$route.path" :class="['el-menu-vertical-demo dark-mode', isDark ? 'isDarkMenu' : '']"
            :collapse="isCollapse" :collapse-transition="false" router unique-opened>

            <div class="logo" @click="$router.push('/welcome')">
                <img src="../assets/my-img/logo.png" alt="">
                <h2 v-show="!isCollapse">小海后台管理系统</h2>
            </div>

            <div v-for="item, index in navList" :key="index">
                <!-- 二级菜单 -->
                <el-sub-menu :index="item.path" popper-class="dark-mode" v-if="item.children">
                    <template #title>
                        <el-icon>
                            <component :is="item.icon"></component>
                        </el-icon>
                        <span v-show="!isCollapse">{{ item.menuName }}</span>
                    </template>
                    <!-- 判断是否有三级菜单 --> <!-- 好吧不用判断 -->
                    <div v-for="item2, index2 in item.children" :key="index2">
                        <!-- <el-sub-menu :index="item2.path" v-if="item2.children">
                            <template #title><span>{{ item2.menuName }}</span></template>
                            <el-menu-item :index="item3.path" v-for="item3, index3 in item2.children" :key="index3">{{
                                item3.menuName }}</el-menu-item>
                        </el-sub-menu> -->

                        <el-menu-item :index="item2.path">
                            <template #title>{{ item2.menuName }}</template>
                        </el-menu-item>
                    </div>
                </el-sub-menu>
                <!-- 一级菜单 -->
                <el-menu-item :index="item.path" v-else>
                    <el-icon>
                        <component :is="item.icon"></component>
                    </el-icon>
                    <template #title>{{ item.menuName }}</template>
                </el-menu-item>
            </div>
        </el-menu>
    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import api from '../api';


onMounted(() => {
    // api.getMenuListApi().then((res) => {
    //     // 获取到左侧导航栏的数据
    //     navList.value = res
    // })
    permission()
})
const permission = () => {
    api.getPermissionListMenuListApi().then((res) => {
        let { menuList, actionList } = res.data;
        // console.log(actionList)
        navList.value = menuList//menu数据
        //本地存储按钮权限列表
        window.sessionStorage.setItem('actionList', JSON.stringify(actionList))
    })
}

//接受父组件传来的值
defineProps<{
    isCollapse: boolean;
    isDark: boolean;
}>()

const navList: any = ref(
    // [
    //     { menuName: "首页", path: "/approve", icon: 'Avatar' },
    //     {
    //         menuName: "总体管理", 
    //         path: "/customer",
    //         icon: 'UserFilled',
    //         children: [
    //             {
    //                 menuName: "用户管理",
    //                 path: "/user",
    //             },
    //             { menuName: "菜单管理", path: "/menu" },
    //         ],
    //     },
    //     {
    //         menuName: "修养预约",
    //         path: "/business",
    //         icon: 'Tools',
    //         children: [
    //             { menuName: "预约信息", path: "/business/appointment" },
    //             {
    //                 menuName: "服务项目",
    //                 path: "/business/service",
    //             },
    //             { menuName: "结算订单", path: "/business/statement" },
    //         ],
    //     },
    //     {
    //         menuName: "武装斗争",
    //         path: "/flow",
    //         icon: 'Promotion',
    //     },
    //     {
    //         menuName: "流程管理",
    //         path: "/flow",
    //         icon: 'MoreFilled',
    //         children: [{ menuName: "审核流程", path: "/flow/definition" }],
    //     },
    // ]
)


// const handleOpen = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }
// const handleClose = (key: string, keyPath: string[]) => {
//     console.log(key, keyPath)
// }

</script>

<style scoped lang="less">
.logo {
    // width: 100%;
    height: 60px;
    display: flex;
    align-items: center;
    padding: 10px 12px;

    img {
        width: 40px;
        // height: 40px;
    }

    h2 {
        font-weight: 700;
        margin: 0;
        font-size: 18px;
        cursor: pointer;
        min-width: 150px;
    }
}

.el-menu--collapse {
    // width: 60px;
    min-height: 100vh;
    // max-height: 80vh;
}


.el-menu-vertical-demo {
    background-color: #f2eada;
    border: none;
    transition: all .5s;
    // transition: none;
}

.isDarkMenu {
    // transition: all .5s;
    background-color: #202124;
}



.el-menu-vertical-demo:not(.el-menu--collapse) {
    // width: 240px;
    min-height: 100vh;
    // transition: all 0.3s;
}

// :deep(.el-menu--inline){
//     background-color: #fff;
// }

// 解决菜单折叠时，二级菜单的箭头不消失的问题
:deep(.el-menu--collapse .el-sub-menu__icon-arrow) {
    display: none;
}
</style>